@import "../../scss/variables.scss";

.view-page{
    display: flex;
    flex-direction:row;
    .wrap-left{
        flex:1;
        display: flex;
        flex-direction:column;
        .head{
            display: flex;
            width: 100%;
            height: 50px;
            background: black;
            .left{
                flex:1;
                padding-left: 20px;
                display: flex;
                align-items: center;
                .logo {
                    display: block;
                    width: 25px;
                    height: 25px;
                    background: url(../../assets/logo.png) 0 0 no-repeat;
                    background-size: cover;
                  }
            }
            .center{
               width: 600px;
               display: flex;
               align-items: center;
               justify-content:center;
               .title{
                   text-align: center;
               }
            }
            .right{
                flex:1;
                display: flex;
                align-items: center;
                padding: 0 10px;
                justify-content: flex-end;
                .icon-button {
                  cursor: pointer;
                  margin-right: 10px;
                  font-size: 20px;
                  &:hover {
                    color: $active-color;
                  }
                }
            }
        }
        .video{
            flex: 1;
            background: #000;
            .dplayer{
                height:calc(100vh - 50px) !important;
                .dplayer-wrap{
                    height:calc(100vh - 50px) !important;
                    .dplayer-video{
                        height:calc(100vh - 50px) !important;
                    } 
                }
            }
        }
    }
    .wrap-right{
        width: 320px;
        display: flex;
        flex-direction: column;
        .tab{
            height:50px;
        }
        .scroll{
            flex: 1;
            overflow: auto;
        .titles{
            display: flex;
            height: 50px;
            justify-content: center;
            align-items: center;
            // color: #FFF;
            .title{
                font-size: 1em;
                text-indent: 2em;
                width: 300px;
            }
            .like{
                flex:1;
                justify-content: flex-end;
                padding-right: 15px;
                color: $active-color;
                text-align: right;
            }
        }
        .piece-container {
            padding:10px;
            .items {
                cursor: pointer;
                padding: 1px 5px 2px 5px;
                line-height: 25px;
                text-align: center;
                display: inline-block;
                border-radius: 10px;
                margin: 1px;
                font-size: 12px;
                &:hover
                {
                    color: $active-color;
                }
                &.active {
                    color: $active-color;
                    background: $darker-background;
                }
            }
        }
        .video-info{
            padding:10px;
            display:flex;
            .image{
                width: 150px;
                img{
                    width: 100%;
                }
            }
            .video{
                flex:1;
                .item{
                    font-weight: normal;
                    font-size: 13px;
                    padding-left:5px;
                    padding-bottom:5px;
                    .key{
                       font-size: 1em;
                    }
                    .value{
                        font-size: 1em;
                        padding-left:5px;
                    }
                }
            }
        }
        .video-desc{
            padding:10px;
            .title{
                font-size:15px;
                color: #FFF;
                padding:10px 0;
            }
            .content{
                font-size: 13px;
            }
        }
    }

    }
}